<template>
  <view class="include-wrap">
    <view class="include-head">
      <view class="head-title"> {{ name }}</view>
      <view v-if="count" class="head-count"> {{ count }}</view>
    </view>
    <view class="include-content">
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  count: {
    type: String
  }
});
</script>

<style lang="scss" scoped>
.include-wrap {
  overflow: hidden;
  border-radius: 8rpx;
  background: #ffffff;
  background-image: url("");
  background-position: 100% 0%;
  background-size: 112rpx 112rpx;
  background-repeat: no-repeat;

  .include-head {
    display: flex;
    width: 100%;
    height: 75rpx;
  }

  .head-title {
    padding-left: 28rpx;
    width: 175rpx;
    height: 75rpx;
    background-image: url("");
    background-size: 100% 100%;
    color: #ffffff;
    font-weight: 400;
    font-size: 26rpx;
    line-height: 50rpx;
  }

  .head-count {
    color: #767676;
    font-weight: 400;
    font-size: 23rpx;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    line-height: 55rpx;
  }

  .include-content {
    display: grid;
    gap: 15rpx;
    padding: 0 19rpx 30rpx;
    grid-template-rows: auto;
  }
}
</style>
